<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  
  <title>水波动画</title>
	<style>
		body{
		  background-color:#333;
		}
		#container{
		  width:325px;
		  height:325px;
		  margin:64px auto 24px;
		  border-radius:0;
		  overflow:hidden;
		  position:relative;
		  background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
		  opacity:1;
		}
		#wave-one{
		  background-color:steelblue;
		  width:400px;
		  height:400px;
		  border-radius:170px;
		  position:absolute;
		  left:50%;
		  margin-left:-200px;
		  top:-195px;
		  opacity:.45;
		  z-index:10;
		  animation-name:waveOne;
		  animation-duration:10s;
		  animation-timing-function:linear;
		  animation-iteration-count:infinite;
		}
		#wave-two{
		  background-color:steelblue;
		  width:400px;
		  height:400px;
		  border-radius:150px;
		  position:absolute;
		  left:50%;
		  margin-left:-180px;
		  top:-210px;
		  opacity:.4;
		  z-index:10;
		  animation-name:waveTwo;
		  animation-duration:10s;
		  animation-timing-function:linear;
		  animation-iteration-count:infinite;
		}
		#wave-three{
		  background-color:steelblue;
		  width:390px;
		  height:390px;
		  border-radius:170px;
		  position:absolute;
		  left:50%;
		  margin-left:-200px;
		  top:-200px;
		  opacity:.25;
		  z-index:10;
		  animation-name:waveThree;
		  animation-duration:10s;
		  animation-timing-function:linear;
		  animation-iteration-count:infinite;
		}
		@keyframes waveOne{
		  0%{transform:rotate(0deg);}
		  25%{transform:rotate(90deg);}
		  50%{transform:rotate(180deg);}
		  75%{transform:rotate(240deg);}
		  100%{transform:rotate(360deg);}
		}
		@keyframes waveTwo{
		  0%{transform:rotate(40deg);}
		  25%{transform:rotate(130deg);}
		  50%{transform:rotate(210deg);}
		  75%{transform:rotate(280deg);}
		  100%{transform:rotate(400deg);}
		}
		@keyframes waveThree{
		  0%{transform:rotate(20deg);}
		  25%{transform:rotate(110deg);}
		  50%{transform:rotate(200deg);}
		  75%{transform:rotate(260deg);}
		  100%{transform:rotate(380deg);}
		}
	</style>
</head>

<body>
  	<div id="container">
 		<div id="wave-one"></div>
 		<div id="wave-two"></div>
  		<div id="wave-three"></div>
	</div>
</body>
</html>
